<template>
    <a-modal v-model:visible="visible" draggable title="图标选择" :width="800" :footer="false" @cancel="onCancel">
      <div class="xn-icon-select-radio">
        <a-radio-group v-model="iconItemDefault" @change="radioGroupChange" type="button">
          <a-radio v-for="iconItem in iconData" :key="iconItem.key" :value="iconItem.key">{{
              iconItem.name
            }}
          </a-radio>
        </a-radio-group>
      </div>
      <div :key="iconItemIns" v-for="iconItemIns in iconData">
        <div v-if="iconItemIns.key === iconItemDefault" class="xn-icon-select-list">
          <ul>
            <li v-for="icon in iconItemIns.item" :key="icon" :class="icon === modelValue ? 'active' : ''"
                @click="selectIcon(icon)">
              <component :is="icon" class="xn-icons"/>
            </li>
          </ul>
        </div>
      </div>
    </a-modal>
  </template>
  
  <script setup lang="ts">
  import {ref} from 'vue'
  import {iconConfig} from './icons'
  
  const visible = ref(false)
  const iconData = ref<any>([])
  const modelValue = ref('')
  const iconItemDefault = ref('')
  const defaultValue = ref('')
  
  const showIconModal = (value: string) => {
    visible.value = true
    iconData.value = iconConfig.icons
    defaultSetting(value)
  }
  const defaultSetting = (value: string) => {
    iconItemDefault.value = 'default'
    if (value) {
      modelValue.value = value
      // 判断展开哪个
      if (value.indexOf('-fill') > -1) {
        iconItemDefault.value = 'fill'
      } else if (value.indexOf('-color') > -1) {
        iconItemDefault.value = 'color'
      }
    }
  }
  // 切换icon风格
  const radioGroupChange = (val: any, env: any) => {
    iconItemDefault.value = val
  }
  const emit = defineEmits({iconCallBack: null})
  // 选择图标后关闭并返回
  const selectIcon = (value: any) => {
    emit('iconCallBack', value)
    initData()
  }
  const onCancel = () => {
    initData()
  }
  const initData = () => {
    modelValue.value = ''
    iconItemDefault.value = ''
    defaultValue.value = ''
    visible.value = false
  }
  // 抛出函数
  defineExpose({
    showIconModal
  })
  </script>
  
  <style lang="less" scoped>
  .xn-icon-select-radio {
    padding-left: 5px;
    padding-bottom: 10px;
  }
  
  .xn-icons {
    font-size: 26px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .xn-icon-select-list {
    height: 360px;
    overflow: auto;
    margin-left: -40px;
  }
  
  .xn-icon-select-list ul {
    li {
      display: inline-block;
      width: 60px;
      height: 60px;
      padding: 18px;
      margin: 5px;
      border-radius: 2px;
      vertical-align: top;
      box-shadow: 0 0 0 1px rgba(5, 5, 5, .06);
      transition: all 0.1s;
      position: relative;
  
      &:hover,
      &.active {
        cursor: pointer;
        color: #ffffff;
        background-color: #1677FF;
      }
    }
  }
  </style>
  